<script setup>
import { ref, watch } from 'vue'
import canvasVue from '@/components/video/analysis/canvas.vue'
import { Plus } from '@element-plus/icons-vue'
import { showMsg, formatStamp, checkImgExists } from '@/assets/js/utils'
import { getImageBase64, addOperation } from '@/assets/api/device'
import objectList from '@/components/video/analysis/objectList.vue'
import { useUserStore } from '@/stores/index'
import config from '@/assets/js/config'
const { protocol } = window.location
const userStore = useUserStore()
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    visibleTitle: {
        type: String,
        default: '',
    },
    visibleNewData: {
        type: Object,
        default() {
            return {}
        },
    },
    ruleItem: {
        type: Object,
        default() {
            return {}
        },
    },
})
const canvasVisible = ref(false) // 画布显/隐
// const pointColorArr = ref([]) //全部的点坐标
// const pointArr = ref([
//     {
//         color: '#f7b5c1',
//         set_roi_region_name: '区域1',
//         set_roi_region_coordinate: [
//             {
//                 x: 2,
//                 y: 133,
//             },
//             {
//                 x: 2,
//                 y: 401,
//             },
//             {
//                 x: 166,
//                 y: 401,
//             },
//             {
//                 x: 167,
//                 y: 134,
//             },
//             {
//                 x: 2,
//                 y: 133,
//             },
//         ],
//     },
//     {
//         set_roi_region_coordinate: [
//             { x: '100', y: 100 },
//             { x: 276, y: 783 },
//             { x: 777, y: 879 },
//             { x: 865, y: 563 },
//         ],
//         set_roi_region_name: '检测区域A',
//     },
// ]) //回显
const canvasVueRef = ref(null) //画布
const completedDraw = ref(false) //点线显/隐
const emits = defineEmits(['update:visible', 'success', 'close'])
const form = ref({
    //表单数据
    status: '',
    uuid: '',
    mark_position: 'top_right',
    task_name: '', //算法任务名称
    set_detect_interval: 500, //频率
    set_detect_iou: 0.7, //精度
    set_detect_conf: 0.25, //阈值
    set_alarm_type: '', //报警类型
    set_alarm_object: [], //报警物体
    set_alarm_interval: 30, //报警间隔
    set_roi_region: [
        // {
        //     set_roi_region_coordinate: [
        //         { x: 1536, y: 221.0909090909091 },
        //         { x: 1254.4, y: 735.4181818181818 },
        //         { x: 563.2, y: 425.8909090909091 },
        //         { x: 714.4727272727273, y: 214.1090909090909 },
        //     ],
        //     set_roi_region_name: '1',
        // },
    ], //检测区域
    set_detect_device_number: ['cpu'], //硬件号
    set_show_version: true, //显示版本号
    set_show_info_mark: true, //显示全局信息
    set_show_roi_line: true, //显示ROI边框
    set_show_roi_label: true, //显示ROI区域名称
    set_show_fill_roi: false, //填充ROI区域
    set_show_fill_non_roi: false, //填充非ROI区域
    set_show_result_box: true, //显示结果边框
    set_show_result_label: false, //显示结果名称
    set_show_result_conf: false, //显示结果可信度
    set_show_result_count: true, //显示结果可信度
    boot_mode: 'manual', //启动方式(手动开关/自动定时)
    operation: 'process', //暂存参数/创建算法任务
    start_time: '00:00', //启动时间
    stop_time: '00:00', //停止时间
    start_date: formatStamp(+new Date(), 'yyyy-MM-dd'), //启动日期
    stop_date: 'forever', //停止日期
    base64img: '',
    camera_height: '',
    camera_width: '',
    ip_addr: `${protocol}//${config.IPUrl}`,
    custom_name: '',
})

const date = ref([])
const time = ref([])
const dateSwitch = ref()
const timeSwitch = ref()
const ruleVisible = ref(false)
const ruleRef = ref(null)
const videoRef = ref(null)
const ratio = ref()
const newData = JSON.parse(JSON.stringify(props.visibleNewData))
const editData = JSON.parse(JSON.stringify(props.ruleItem))
const markPosition = ref([
    {
        label: '左上角',
        value: 'top_left',
    },
    {
        label: '右上角',
        value: 'top_right',
    },
    {
        label: '左下角',
        value: 'bottom_left',
    },
    {
        label: '右下角',
        value: 'bottom_right',
    },
])
const loading = ref(false)
const hardWareType = ref()
const hardWare = ref([
    {
        label: 'CPU',
        value: 'cpu',
    },
    {
        label: 'GPU',
        value: 'gpu',
    },
])
const hardwareSubclass = ref()
const offsetHeight = ref(464)
const ruleType = ref(true)
function getData() {
    if (props.ruleItem.task_type) {
        loading.value = true
        const {
            algorithm_name,
            model_name,
            model_path,
            model_type,
            task_type,
            camera_ip,
            camera_port,
            camera_account,
            camera_password,
            name,
            number,
            algorithm_id,
            connection_status,
        } = editData
        Object.assign(form.value, {
            task_name: algorithm_name,
            load_model_name: model_name,
            load_model_path: model_path,
            load_model_type: model_type,
            task_type,
            camera_ip,
            camera_port,
            camera_account,
            camera_password,
            channel_name: name,
            device_number: number,
            algorithm_id,
            connection_status,
            custom_name: algorithm_name,
            set_alarm_type: algorithm_name,
        })
        if (editData.connection_status == 'False') {
            form.value.set_alarm_object.push(editData)
        }
        CaptureImage()
    } else {
        const {
            task_name,
            set_detect_interval,
            set_detect_iou,
            set_detect_conf,
            set_alarm_type,
            set_alarm_object,
            set_alarm_interval,
            set_roi_region,
            set_detect_device_number,
            set_show_version,
            set_show_info_mark,
            set_show_roi_line,
            set_show_roi_label,
            set_show_fill_roi,
            set_show_fill_non_roi,
            set_show_result_box,
            set_show_result_label,
            set_show_result_conf,
            set_show_result_count,
            boot_mode,
            operation,
            start_time,
            stop_time,
            start_date,
            stop_date,
            base64img,
            camera_height,
            camera_width,
            channel_name,
            device_number,
            load_model_name,
            load_model_path,
            load_model_type,
            mark_position,
            camera_ip,
            camera_port,
            camera_account,
            camera_password,
            status,
            task_type,
            uuid,
            connection_status,
            algorithm_id,
            custom_name,
        } = newData
        Object.assign(form.value, {
            task_name,
            set_detect_interval,
            set_detect_iou,
            set_detect_conf,
            set_alarm_type,
            set_alarm_object,
            set_alarm_interval,
            set_roi_region,
            set_detect_device_number,
            set_show_version,
            set_show_info_mark,
            set_show_roi_line,
            set_show_roi_label,
            set_show_fill_roi,
            set_show_fill_non_roi,
            set_show_result_box,
            set_show_result_label,
            set_show_result_conf,
            set_show_result_count,
            boot_mode,
            operation,
            start_time,
            stop_time,
            start_date,
            stop_date,
            base64img,
            camera_height,
            camera_width,
            channel_name,
            device_number,
            load_model_name,
            load_model_path,
            load_model_type,
            mark_position,
            camera_ip,
            camera_port,
            camera_account,
            camera_password,
            status,
            task_type,
            uuid,
            connection_status,
            algorithm_id,
            custom_name, //算法名称
        })
        // 判断图片是否有效
        inspectImage(base64img)
    }
    time.value = [form.value.start_time, form.value.stop_time]
    date.value = [form.value.start_date, form.value.stop_date]
    hardWareType.value =
        form.value.set_detect_device_number.join().indexOf('cpu') == 0
            ? 'cpu'
            : 'gpu'
    // 手动
    if (form.value.boot_mode == 'auto') {
        dateSwitch.value = true
        timeSwitch.value = true
    }
}
getData()
function closeAction() {
    emits('update:visible', false)
}
// function resetCanvas() {
//     canvasVueRef.value.reset()
// }
//点绘画完成
function handleDrawFinish(e) {
    // 编辑的时候不需要二次计算
    let set_roi_region = e.map((item) => {
        return {
            x: item.x / ratio.value,
            y: item.y / ratio.value,
        }
    })
    form.value.set_roi_region[0].set_roi_region_coordinate = [...set_roi_region]
    completedDraw.value = false
}

// 添加
function addCanvas() {
    form.value.set_roi_region.unshift({
        set_roi_region_name: '',
        set_roi_region_coordinate: [],
    })
    noFull.value = true
}
// 保存
// function saveCanvasItem(item) {}
// 绘制
function drawCanvasItem(item) {
    if (item.set_roi_region_name == '') {
        showMsg('请输入名称再绘制', 'error')
        return
    }
    if (item.set_roi_region_coordinate.length !== 0) {
        showMsg('请勿重复绘制', 'error')
        return
    }
    completedDraw.value = true
}
function resetCanvas() {
    canvasVueRef.value.reset()
    form.value.set_roi_region.length = 0
    full.value = false
    noFull.value = false
}
// 图片加载完成
function onLoadImg() {
    canvasVisible.value = true
    ratio.value = videoRef.value.offsetWidth / form.value.camera_width //比例返回图片和窗口比例
    offsetHeight.value = videoRef.value.offsetHeight
}
function changeDate(value) {
    form.value.start_date = value[0]
    form.value.stop_date = value[1]
}
function changeTime(value) {
    form.value.start_time = value[0]
    form.value.stop_time = value[1]
}
function changeHard(value) {
    if (value == 'gpu') {
        hardwareSubclass.value = [
            {
                label: 'GPU_0',
                value: '0',
            },
            {
                label: 'GPU_1',
                value: '1',
            },
            {
                label: 'GPU_2',
                value: '2',
            },
        ]
    } else {
        hardwareSubclass.value = [
            {
                label: 'CPU',
                value: 'cpu',
            },
        ]
    }
    form.value.set_detect_device_number.length = 0
}
function submit() {
    if (form.value.custom_name == '') {
        showMsg('请输入任务名称', 'error')
        return
    }
    if (form.value.set_roi_region.length == 0) {
        showMsg('请绘制区域', 'error')
        return
    }
    if (
        form.value.set_alarm_object.length == 0 &&
        editData.connection_status == 'True'
    ) {
        showMsg('请选择目标对象', 'error')
        return
    }

    form.value.set_alarm_object = form.value.set_alarm_object.map((item) => {
        return item.alarm_object_name
    })
    form.value.license_information = userStore.systemInfo.gatewayPermit
    if (dateSwitch.value || timeSwitch.value) {
        form.value.boot_mode = 'auto'
    }
    // // 编辑的时候不需要二次计算
    // if (form.value.uuid == '') {
    //     let set_roi_region = form.value.set_roi_region.map((item) => {
    //         return {
    //             set_roi_region_coordinate: item.set_roi_region_coordinate.map(
    //                 (xitem) => {
    //                     return {
    //                         x: xitem.x / ratio.value,
    //                         y: xitem.y / ratio.value,
    //                     }
    //                 }
    //             ),
    //             set_roi_region_name: item.set_roi_region_name,
    //         }
    //     })
    //     param = Object.assign(form.value, { set_roi_region })
    // }
    let param = { ...form.value }
    addOperation(param).then(() => {
        showMsg('操作成功')
        emits('update:visible', false)
        emits('success')
        emits('close')
    })
}
function CaptureImage() {
    loading.value = true
    const params = {
        uuid: form.value.uuid,
        camera_ip: form.value.camera_ip,
        camera_port: form.value.camera_port,
        camera_account: form.value.camera_account,
        camera_password: form.value.camera_password,
        license_information: userStore.systemInfo.gatewayPermit,
        ip_addr: config.imgUrl,
    }
    getImageBase64(params).then((res) => {
        inspectImage(res.data.base64img)
        form.value.camera_width = res.data.camera_width
        form.value.camera_height = res.data.camera_height
        loading.value = false
    })
}
function chooseTarget() {
    ruleVisible.value = true
}
const full = ref(false)
const noFull = ref(false)
// 全屏区域
function fullScreen() {
    full.value = true
    form.value.set_roi_region = [
        {
            set_roi_region_coordinate: [
                { x: 0, y: 0 },
                { x: 0, y: form.value.camera_height / ratio.value },
                {
                    x: form.value.camera_width / ratio.value,
                    y: form.value.camera_height / ratio.value,
                },
                { x: form.value.camera_width / ratio.value, y: 0 },
            ],
            set_roi_region_name: '全屏检测',
        },
    ]
}
// 验证图片有效
function inspectImage(url) {
    checkImgExists(url)
        .then(() => {
            form.value.base64img = url
        })
        .catch(() => {
            showMsg('图片地址无效', 'error')
        })
}
watch(
    () => [ruleVisible.value, ruleType.value],
    ([value, value1]) => {
        if (!value && value1) {
            form.value.set_alarm_object = ruleRef.value.checkList
        }
    }
)
</script>
<template>
    <el-dialog
        :model-value="visible"
        :title="visibleTitle"
        width="1200px"
        @close="closeAction"
    >
        <el-button class="mb-10" @click="CaptureImage">重新抓取</el-button>
        <div class="dflex main">
            <div
                class="video"
                ref="videoRef"
                v-loading="loading"
                element-loading-text="Loading..."
                element-loading-svg-view-box="-10, -10, 50, 50"
                element-loading-background="rgba(122, 122, 122, 0.8)"
            >
                <img
                    :src="form.base64img"
                    alt=""
                    :onload="onLoadImg"
                    :style="{ height: offsetHeight + 'px', width: '100%' }"
                />
                <canvasVue
                    :style="{
                        height: offsetHeight + 'px',
                        width: '100%',
                        position: 'absolute',
                        top: 0,
                    }"
                    v-if="canvasVisible"
                    :single="true"
                    ref="canvasVueRef"
                    @finish="handleDrawFinish"
                    :completedDraw="completedDraw"
                    :pointArr="form.set_roi_region"
                    :ratio="ratio"
                ></canvasVue>
            </div>
            <div
                :style="{
                    overflowY: 'auto',
                    width: '30%',
                    height: offsetHeight + 'px',
                }"
            >
                <el-form :model="form" label-width="60px">
                    <el-form-item label="名称">
                        <el-input v-model="form.custom_name" />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            :disabled="!canvasVisible || full"
                            size="small"
                            :icon="Plus"
                            circle
                            @click="addCanvas"
                        />
                        <div class="ml-10">新增绘制</div>
                        <el-button
                            :disabled="!canvasVisible || noFull"
                            class="ml-10"
                            size="small"
                            @click="fullScreen"
                            >全屏</el-button
                        >
                        <el-button
                            :disabled="!canvasVisible"
                            class="ml-30"
                            size="small"
                            @click="resetCanvas"
                            >全部清除</el-button
                        >

                        <div
                            class="d-flex"
                            v-for="item in form.set_roi_region"
                            :key="item"
                        >
                            <el-input
                                size="small"
                                v-model="item.set_roi_region_name"
                            />
                            <el-button
                                class="ml-10"
                                size="small"
                                @click="drawCanvasItem(item)"
                                >绘制</el-button
                            >

                            <!-- <el-button
                                class="ml-10"
                                size="small"
                                @click="saveCanvasItem(item)"
                                >保存</el-button
                            > -->
                            <!-- <el-button @click="resetCanvas" size="small"
                                >清除</el-button
                            > -->
                        </div>
                    </el-form-item>
                    <el-tabs
                        type="border-card"
                        class="card"
                        style="margin-left: 60px"
                    >
                        <el-tab-pane label="基本设置">
                            <!-- <el-form-item label="目标对象">
                                    <el-select>
                                        <el-option label="1" value="1" />
                                        <el-option label="1" value="1" />
                                    </el-select>
                                </el-form-item> -->
                            <el-form-item
                                v-if="
                                    editData.connection_status == 'True' ||
                                    form.connection_status == 'True'
                                "
                            >
                                <el-button @click="chooseTarget"
                                    >选择目标对象...</el-button
                                >
                                <!-- <el-button>移除</el-button> -->
                            </el-form-item>
                            <el-form-item label="适用目标类型">
                                <div
                                    style="
                                        border: 1px solid #e6e6e6;
                                        width: 100%;
                                    "
                                    class="pd-10 d-flex wrap"
                                >
                                    <div>
                                        <el-tag
                                            class="mb-3 mr-5"
                                            v-for="item in form.set_alarm_object"
                                            :key="item"
                                            >{{ item.object }}</el-tag
                                        >
                                    </div>
                                </div>
                            </el-form-item>

                            <div class="number">
                                <el-form-item label="报警间隔">
                                    <el-input
                                        v-model="form.set_alarm_interval"
                                        size="small"
                                    />
                                    秒
                                </el-form-item>
                                <div class="number">
                                    <el-form-item label="检测频率">
                                        <el-input
                                            v-model="form.set_detect_interval"
                                            size="small"
                                        />
                                        毫秒
                                    </el-form-item>
                                </div>
                                <el-form-item label="检测精度">
                                    <el-input-number
                                        v-model="form.set_detect_iou"
                                        :min="0.5"
                                        :max="0.7"
                                        size="small"
                                        controls-position="right"
                                    />
                                </el-form-item>
                                <el-form-item label="结果判定阈值">
                                    <el-input-number
                                        v-model="form.set_detect_conf"
                                        :min="0.25"
                                        :max="0.99"
                                        size="small"
                                        controls-position="right"
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <el-radio-group
                                        class="ml-4 mt-10"
                                        v-model="form.operation"
                                    >
                                        <el-radio label="process"
                                            >发布</el-radio
                                        >
                                        <el-radio label="save">暂存</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <!-- <el-form-item label="目标最小宽度">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            size="small"
                                            controls-position="right"
                                        />
                                        像素
                                    </el-form-item>
                                    <el-form-item label="目标最小高度">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            size="small"
                                            controls-position="right"
                                        />
                                        像素
                                    </el-form-item> -->
                                <!-- <el-form-item>
                                        <el-checkbox
                                            label="触发抓拍后识别车牌"
                                        />
                                        <el-checkbox
                                            label="上传事件到中心管理平台"
                                        />
                                    </el-form-item> -->
                                <el-tabs type="border-card" class="timeCard">
                                    <el-tab-pane label="时间段">
                                        <el-form-item>
                                            <el-switch
                                                v-model="dateSwitch"
                                                size="small"
                                                active-text="自动定时"
                                                inactive-text="手动开关"
                                            />
                                        </el-form-item>
                                        <el-form-item>
                                            <el-date-picker
                                                :disabled="!dateSwitch"
                                                class="fs-12"
                                                @change="changeDate"
                                                v-model="date"
                                                type="daterange"
                                                start-placeholder="启动日期"
                                                end-placeholder="停止日期"
                                                value-format="YYYY-MM-DD"
                                            />
                                        </el-form-item>
                                        <el-form-item>
                                            <el-switch
                                                v-model="timeSwitch"
                                                size="small"
                                                active-text="自动定时"
                                                inactive-text="手动开关"
                                            />
                                        </el-form-item>
                                        <el-form-item>
                                            <el-time-picker
                                                @change="changeTime"
                                                :disabled="!timeSwitch"
                                                v-model="time"
                                                is-range
                                                range-separator="-"
                                                start-placeholder="启动时间"
                                                end-placeholder="停止时间"
                                                format="HH:mm"
                                                value-format="HH:mm"
                                            />
                                        </el-form-item>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="高级设置">
                            <el-form-item label="计算硬件">
                                <div class="dflex">
                                    <el-select
                                        style="width: 50%"
                                        @change="changeHard"
                                        v-model="hardWareType"
                                        class="m-2 mr-10"
                                        placeholder="请选择"
                                        value-key="value"
                                    >
                                        <el-option
                                            v-for="item in hardWare"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                    <el-select
                                        collapse-tags
                                        collapse-tags-tooltip
                                        multiple
                                        v-model="form.set_detect_device_number"
                                        class="m-2"
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in hardwareSubclass"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item label="显示版本号">
                                <el-switch
                                    v-model="form.set_show_version"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="显示全局信息">
                                <el-switch
                                    v-model="form.set_show_info_mark"
                                    size="small"
                                    class="mr-10"
                                />
                                <el-select
                                    v-model="form.mark_position"
                                    class="m-2"
                                    placeholder="Select"
                                    size="small"
                                >
                                    <el-option
                                        v-for="item in markPosition"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="显示ROI边框">
                                <el-switch
                                    v-model="form.set_show_roi_line"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="显示ROI区域名称">
                                <el-switch
                                    v-model="form.set_show_roi_label"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="填充ROI区域">
                                <el-switch
                                    v-model="form.set_show_fill_roi"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="填充非ROI区域">
                                <el-switch
                                    v-model="form.set_show_fill_non_roi"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="显示结果边框">
                                <el-switch
                                    v-model="form.set_show_result_box"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="显示结果名称">
                                <el-switch
                                    v-model="form.set_show_result_label"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="显示结果可信度">
                                <el-switch
                                    v-model="form.set_show_result_conf"
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item label="显示结果计数">
                                <el-switch
                                    v-model="form.set_show_result_count"
                                    size="small"
                                />
                            </el-form-item>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="联动">
                                <el-form-item>
                                    <el-checkbox label="触发摄像头开关输出" />
                                </el-form-item>
                                <div class="number">
                                    <el-form-item label="输出开关号">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            size="small"
                                            controls-position="right"
                                        />
                                    </el-form-item>
                                    <el-form-item label="输出持续时间">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            size="small"
                                            controls-position="right"
                                        />
                                    </el-form-item>
                                </div>
                                <el-form-item>
                                    <el-checkbox label="触发录像" />
                                </el-form-item>
                                <div class="number">
                                    <el-form-item label="延时">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            size="small"
                                            controls-position="right"
                                        />秒
                                    </el-form-item>
                                    <el-form-item label="预置位守护位">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            size="small"
                                            controls-position="right"
                                        />
                                    </el-form-item>
                                </div>
                                <el-form-item>
                                    <el-checkbox label="终端语音输出" />
                                </el-form-item>
                                <el-form-item label="语音文本">
                                    <el-input
                                        v-model="form.name"
                                        :autosize="{ minRows: 2, maxRows: 4 }"
                                        type="textarea"
                                        placeholder="请输入"
                                    />
                                </el-form-item>
                                <div class="number">
                                    <el-form-item label="音量">
                                        <el-input-number
                                            :min="1"
                                            :max="10"
                                            size="small"
                                            controls-position="right"
                                        />范围(1小-10大)
                                    </el-form-item>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="清除">
                                <el-form-item>
                                    <el-button>绘制排除线</el-button>
                                    <el-button>清除排除线</el-button>
                                </el-form-item>

                                *将排除线绘制到错误的对象框内
                            </el-tab-pane> -->
                    </el-tabs>
                    <el-form-item class="mt-10">
                        <el-button type="primary" @click="submit"
                            >确定</el-button
                        >
                        <el-button @click="closeAction">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </el-dialog>
    <objectList
        ref="ruleRef"
        v-model:ruleVisible="ruleVisible"
        v-model:ruleType="ruleType"
        v-if="ruleVisible"
        :alarmObject="form.set_alarm_object"
    ></objectList>
</template>
<style lang="scss" scoped>
:deep(.video) {
    width: 74%;
    position: relative;
    height: min-content;
}
:deep(.card) {
    .el-form-item {
        display: block !important;
        margin-bottom: 10px;
        .el-form-item__label {
            width: auto !important;
        }
        .el-form-item__content {
            margin-left: inherit !important;
        }
    }
}
:deep(.number) {
    .el-form-item {
        display: flex !important;
        margin-bottom: 10px;
        .el-form-item__label {
            width: auto !important;
        }
        .el-input-number--small {
            width: 0.525rem !important;
            margin-right: 4px;
        }
        .el-input--small {
            width: 0.525rem !important;
            margin-right: 4px;
        }
    }
}
:deep(.el-input-number) {
    .el-input__wrapper {
        padding: 0 !important;
    }
}
:deep(.el-tabs--border-card) {
    overflow-y: auto;
}
.example-showcase .el-loading-mask {
    z-index: 9;
}
</style>
